<template>
	<el-container style="padding: 20px; display: block">
		<el-main style="margin-bottom: 16px">
			<el-form :model="searchData" class="forms">
				<el-date-picker
					placeholder="开始日期"
					class="start"
					size="small"
					type="date"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="searchData.startDate"
				></el-date-picker>
				至
				<el-date-picker
					placeholder="结束日期"
					class="end"
					size="small"
					type="date"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="searchData.endDate"
				></el-date-picker>
				<el-button type="primary" class="srachs" icon="el-icon-search" size="mini" @click="init()">搜 索</el-button>
			</el-form>
		</el-main>
		<el-main>
			<div class="title">
				<span>待办列表</span>
			</div>
			<div style="display: flex; margin-bottom: 16px">
				<el-dropdown>
					<el-button size="small"> 清除筛选条件<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
					<el-dropdown-menu slot="dropdown" trigger="click">
						<el-dropdown-item v-for="(item, index) in listItem" :key="index" @click.native="resetDateFilter(item.value, 1)">{{
							item.key
						}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button size="small" @click="resetDateFilter('', 1)" style="margin-left: 16px">清除所有筛选条件</el-button>
			</div>
			<el-table :data="notDoneList" stripe border style="width: 100%" :header-cell-style="{ background: '#FAFAFA' }" ref="notDoneList">
				<el-table-column
					prop="fundFullName"
					label="产品名称"
					width="270px"
					sortable
					column-key="fundFullName"
					:filters="returnFilterArray('fundFullName', 1)"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column prop="substance" label="内容" height="20px"> </el-table-column>

				<el-table-column
					prop="createdDate"
					:formatter="formatterDate"
					label="时间"
					width="200px"
					sortable
					column-key="createdDate"
					:filters="returnFilterArray('createdDate', 1)"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column prop="operation" label="操作" fixed="right" width="100px">
					<template slot-scope="scope">
						<el-button v-if="activeName === 'my'" size="mini" type="primary" icon="el-icon-success" @click="readMessage(scope.row._id)"
							>处理</el-button
						>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				background
				:page-size="notDonePaging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="notDonePaging.num"
				:page-sizes="notDonePaging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="notDonePaging.total"
			/>

			<div class="title" style="margin-top: 30px">
				<span>已办列表</span>
			</div>
			<div style="display: flex; margin-bottom: 16px">
				<el-dropdown>
					<el-button size="small"> 清除筛选条件<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
					<el-dropdown-menu slot="dropdown" trigger="click">
						<el-dropdown-item v-for="(item, index) in listItem" :key="index" @click.native="resetDateFilter(item.value, 2)">{{
							item.key
						}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button size="small" @click="resetDateFilter('', 2)" style="margin-left: 16px">清除所有筛选条件</el-button>
			</div>
			<el-table :data="alreadyList" stripe border style="width: 100%" :header-cell-style="{ background: '#FAFAFA' }" ref="alreadyList">
				<el-table-column
					prop="fundFullName"
					label="产品名称"
					width="270px"
					column-key="fundFullName"
					:filters="returnFilterArray('fundFullName', 2)"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column prop="substance" label="内容" height="20px"> </el-table-column>

				<el-table-column
					prop="createdDate"
					:formatter="formatterDate"
					sortable
					label="时间"
					width="200px"
					column-key="createdDate"
					:filters="returnFilterArray('createdDate', 2)"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column prop="operation" label="操作" fixed="right" width="100px"> </el-table-column>
			</el-table>

			<el-pagination
				background
				:page-size="alreadyPaging.size"
				@current-change="handleCurrentChangeTwo"
				@size-change="handleSizeChangeTwo"
				:current-page="alreadyPaging.num"
				:page-sizes="alreadyPaging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="alreadyPaging.total"
			/>
		</el-main>
	</el-container>
</template>
<script>
import { dateFormatter, getDateDayAfter } from '@/utils/timer'
import { searchMessageList, handleMessage } from '@/api/productApi/needList'
import { debounce } from '@/utils/debounceFunc'
export default {
	name: 'NeedList',
	data() {
		return {
			inShow: true,
			searchData: { startDate: '', endDate: '' },
			notDonePaging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 50, 100, 200]
			},
			alreadyPaging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 50, 100, 200]
			},
			notDoneList: [],
			alreadyList: [],
			activeName: 'my',
			listItem: [
				{ key: '产品名称', value: 'fundFullName' },
				{ key: '时间', value: 'createdDate' }
			]
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.searchData.startDate = dateFormatter('yyyy-MM-dd', getDateDayAfter(-1))
			this.searchData.endDate = dateFormatter('yyyy-MM-dd', getDateDayAfter(0))
			this.getNotDoneList()
			this.getAlreadyList()
		})
	},
	methods: {
		resetDateFilter(msg, num) {
			if (num === 1) {
				msg ? this.$refs.notDoneList.clearFilter(msg) : this.$refs.notDoneList.clearFilter()
			} else {
				msg ? this.$refs.notDoneList.clearFilter(msg) : this.$refs.notDoneList.clearFilter()
			}
		},
		returnFilterArray(property, num) {
			const array = []
			if (num === 1) {
				this.notDoneList.forEach(item => {
					if (!array.some(items => items.text === item[property]) && !!item[property]) {
						const obj = { text: item[property], value: item[property] }
						array.push(obj)
					}
				})
			} else {
				this.alreadyList.forEach(item => {
					if (!array.some(items => items.text === item[property]) && !!item[property]) {
						const obj = { text: item[property], value: item[property] }
						array.push(obj)
					}
				})
			}
			return array
		},
		filterHandler(value, row, column) {
			const property = column['property']
			return row[property] === value
		},

		// 待办:改变页数
		handleCurrentChange(val) {
			this.notDonePaging.num = val
			this.getNotDoneList()
		},
		// 待办:改变条数
		handleSizeChange(val) {
			this.notDonePaging.num = 1
			this.notDonePaging.size = val
			this.getNotDoneList()
		},
		// 已办：改变页数
		handleCurrentChangeTwo(val) {
			this.alreadyPaging.num = val
			this.getAlreadyList()
		},
		// 已办：改变条数
		handleSizeChangeTwo(val) {
			this.alreadyPaging.num = 1
			this.alreadyPaging.size = val
			this.getAlreadyList()
		},
		init() {
			this.notDonePaging.num = 1
			this.alreadyPaging.num = 1
			this.getNotDoneList()
			this.getAlreadyList()
		},
		readMessage(newsRemindId) {
			this.operatorComfirm(() => {
				handleMessage({ newsRemindId }).then(res => {
					if (res.msgCode === 'Y') {
						this.init()
						this.$message({ message: res.msgDesc, type: 'success' })
					}
				})
			}, '处理该条信息')
		},
		// 待办信息列表
		getNotDoneList: debounce(function() {
			const obj = {
				status: '0',
				startDate: this.searchData.startDate,
				endDate: this.searchData.endDate,
				type: 'my'
			}
			searchMessageList(obj, this.notDonePaging).then(res => {
				if (res.msgCode === 'Y') {
					this.notDonePaging.total = res.data.page.total
					this.notDoneList = res.data.body
				}
			})
		}, 100),
		// 已办信息列表
		getAlreadyList: debounce(function() {
			const obj = {
				status: '1',
				startDate: this.searchData.startDate,
				endDate: this.searchData.endDate,
				type: 'my'
			}
			searchMessageList(obj, this.alreadyPaging).then(res => {
				if (res.msgCode === 'Y') {
					this.alreadyPaging.total = res.data.page.total
					this.alreadyList = res.data.body
				}
			})
		}, 100),
		formatterDate: function(row, column, cellValue, index) {
			if (cellValue) {
				return dateFormatter('yyyy-MM-dd hh:mm:ss', new Date(cellValue))
			} else {
				return ''
			}
		}
	}
}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
